<!--企业档案详情-->
<template>
	<view class="order">
		<!--顶部个人信息栏-->
		<view>
			<u-row style="margin-top: 20px;">
				<u-col span="5" offset="1">
					<image @click="handleToAvatar" src="/static/qydd.png" style="height: 36px;">
				</u-col>
				<u-col span="3" offset="2">
					<image @click="handleToAvatar" src="/static/dt.png"
						style="height: 85px; width: 85px; float: right;">
				</u-col>
			</u-row>
		</view>
		<view class="content-section" style="margin-top: 25px;">
			<u-collapse @change="change" @close="close" @open="open">
				<u-collapse-item title="基础信息" name="Docs guide">
					<view><text class="u-collapse-content">{{qyxqData.name}}</text></view>
					<view>法定代表人:<text class="u-collapse-content">{{qyxqData.primaryDirectorName}}</text></view>
					<view>注册时间:<text class="u-collapse-content">{{parseInt(qyxqData.createTime) | dateFormat}}</text>
					</view>
					<view>联系电话:<text class="u-collapse-content">{{qyxqData.phone}}</text></view>
					<view>公司地址:<text class="u-collapse-content">{{qyxqData.address}}</text></view>
				</u-collapse-item>
				<u-collapse-item
					:title="`监测设备(${jcsbData.deviceOnlineSum === undefined ? 0 : jcsbData.deviceOnlineSum}/${jcsbData.deviceSum === undefined ? 0 : jcsbData.deviceSum})个`"
					name="Variety components">
					<view class="u-collapse-content">
						<view>
							<uni-section title="类型" type="line">
								<uni-data-select label="应用选择" emptyText="暂无数据" placeholder="请选择设备类型" v-model="value"
									:localdata="range" @change="changeone()">
								</uni-data-select>
							</uni-section>
							<uni-table align="center" emptyText="暂无更多数据" style="margin-top:10rpx;">
								<!-- 表头行 -->
								<uni-tr>
									<uni-th align="center" width="80px" class="align-text">设备名称</uni-th>
									<uni-th align="center" width="40px" class="align-text">状态</uni-th>
									<uni-th align="center" width="116px" class="align-text">监测数据</uni-th>
								</uni-tr>
								<!-- 表格数据行 -->
								<uni-tr v-for="(item, index) in jcsbData.deviceList">
									<uni-td align="center" class="align-text-td">{{item.deviceName}}</uni-td>
									<uni-td align="center" class="align-text-td">{{item.status}}</uni-td>
									<uni-td align="center" class="align-text-td">
										<text class="text-two">查看</text>
									</uni-td>
								</uni-tr>
							</uni-table>
						</view>
					</view>
				</u-collapse-item>
				<u-collapse-item title="监控设备" name="Numerous tools">
					<view class="u-collapse-content">
						<view>
							<uni-section title="类型" type="line">
								<uni-data-select label="应用选择" emptyText="暂无数据" placeholder="请选择设备类型" v-model="value"
									:localdata="range1" @change="changeone">
								</uni-data-select>
							</uni-section>
							<uni-table align="center" emptyText="暂无更多数据" style="margin-top:10rpx;">
								<!-- 表头行 -->
								<uni-tr>
									<uni-th align="center" width="100px" class="align-text">设备名称</uni-th>
									<uni-th align="center" width="56px" class="align-text">状态</uni-th>
									<uni-th align="center" width="80px" class="align-text">监测数据</uni-th>
								</uni-tr>
								<!-- 表格数据行 -->
								<uni-tr v-for="(item, index) in jksbData.deviceList">
									<uni-td align="center" class="align-text-td">{{item.deviceName}}</uni-td>
									<uni-td align="center" class="align-text-td">{{item.status}}</uni-td>
									<uni-td align="center" class="align-text-td">
										<text @click="tabClick()" class="text-two">查看画面</text>
										<text @click="tabClick()" class="text-two">查看回放</text>
									</uni-td>
								</uni-tr>
							</uni-table>
						</view>
					</view>
				</u-collapse-item>
				<u-collapse-item :title="`巡查点(${xcdxqData.patrolPointNum})个`" name="Numerous tools">
					<view class="u-collapse-content">
						<view>
							<u-row>
								<u-col span="8">
									<u-row>
										<u-col span="5" offset="0.5">
											<view class="text-three">责任区:<text>{{xcdxqData.zoneNum}}个</text> </view>
										</u-col>
										<u-col span="5">
											<view class="text-three">负责人:<text>{{xcdxqData.personNum}}个</text> </view>
										</u-col>
									</u-row>
								</u-col>
								<u-col span="4">
									<uni-section title="类型" type="line">
										<uni-data-select label="应用选择" emptyText="暂无数据" placeholder="请选择" v-model="value"
											:localdata="range2" @change="changeone">
										</uni-data-select>
									</uni-section>
								</u-col>

							</u-row>
							<uni-table align="center" emptyText="暂无更多数据">
								<!-- 表头行 -->
								<uni-tr>
									<uni-th align="center" width="100px" class="align-text">巡查点名称</uni-th>
									<uni-th align="center" width="56px" class="align-text">责任区</uni-th>
									<uni-th align="center" width="80px" class="align-text">负责人</uni-th>
									<uni-th align="center" width="80px" class="align-text">状态</uni-th>
								</uni-tr>
								<!-- 表格数据行 -->
								<uni-tr v-for="(item, index) in xcdxqData.children">
									<uni-td align="center" class="align-text-td">{{item.patrolPointName}}</uni-td>
									<uni-td align="center" class="align-text-td">{{item.zoneName}}</uni-td>
									<uni-td align="center" class="align-text-td">
										<text @click="tabClick()" class="text-two">{{item.personnelName}}</text>

									</uni-td>
									<uni-td align="center" class="align-text-td">{{item.statusText}}</uni-td>
								</uni-tr>

							</uni-table>
						</view>
					</view>

				</u-collapse-item>
				<u-collapse-item title="隐患信息" name="Numerous tools">
					<view class="u-collapse-content">
						<view>
							<u-row>
								<u-col span="6.5">
									<uni-section title="类型" type="line">
										<uni-data-select label="应用选择" emptyText="暂无数据" placeholder="请选择类型"
											v-model="value" :localdata="range3" @change="changethree">
										</uni-data-select>
									</uni-section>
								</u-col>
								<u-col span="5" offset="0.5">
									<uni-section title="类型" type="line">
										<uni-data-select label="应用选择" emptyText="暂无数据" placeholder="请选择状态"
											v-model="value" :localdata="range4" @change="changeone">
										</uni-data-select>
									</uni-section>
								</u-col>

							</u-row>
							<uni-table align="center" emptyText="暂无更多数据" style="margin-top:10rpx;">
								<!-- 表头行 -->
								<uni-tr>
									<uni-th align="center" width="100px" class="align-text">隐患名称</uni-th>
									<uni-th align="center" width="56px" class="align-text">等级</uni-th>
									<uni-th align="center" width="80px" class="align-text">状态</uni-th>
								</uni-tr>
								<!-- 表格数据行 -->
								<uni-tr v-for="(item, index) in yhxxData">
									<uni-td align="center" class="align-text-td">{{item.dangerName}}</uni-td>
									<uni-td align="center" class="align-text-td">
										<u-button :text="danger_level[item.dangerLevel]" color="#225EA4" size="mini">
										</u-button>
									</uni-td>
									<uni-td align="center" class="align-text-td">
										<text @click="tabClick()"
											class="text-two">{{hidden_status[item.dangerStatus]}}</text>

									</uni-td>
								</uni-tr>
							</uni-table>
						</view>
					</view>



				</u-collapse-item>
			</u-collapse>
		</view>
	</view>
</template>

<script>
	import storage from "@/utils/storage";
	import {
		qyxqList,
		jcsbList,
		xcdxqList,
		yhxxList
	} from "@/api/my/qyxq.js"
	import {
		mapState
	} from 'vuex' //引入mapState
	export default {
		data() {
			return {
				qyxqData: [], //企业详情数据
				jcsbData: {
					deviceOnlineSum: 0,
					deviceSum: 0

				}, //监测设备详情数据
				jksbData: {}, //监测设备详情数据
				xcdxqData: {}, //巡查点详情数据
				yhxxData: [],
				//表格
				searchVal: "",
				tableData: [],
				// 每页数据量
				pageSize: 10,
				// 当前页
				pageCurrent: 1,
				// 数据总量
				total: 0,
				loading: false,

				value: "",
				range: [],
				range1: [],
				range2: [],
				range3: [],
				range4: [{
						value: 1,
						text: '未整改'
					},
					{
						value: 2,
						text: '整改中'
					},
					{
						value: 3,
						text: '已整改'
					}

				],
				name: "刘德华",
				// name: this.$store.state.user.name,
				version: getApp().globalData.config.appInfo.version,
			};
		},
		//注意函数和data同级,不要写在methods内
		onNavigationBarButtonTap(e) {
			if (e.index == 0) {
				this.$tab.navigateTo("/pages/my/setting/index");
			}
			if (e.index == 1) {
				this.$tab.navigateTo("/pages/my/systemmessage/index");
			}
		},

		computed: {
			avatar() {
				return this.$store.state.user.avatar;
			},
			windowHeight() {
				return uni.getSystemInfoSync().windowHeight - 50;
			},

			...mapState({
				danger_level: state => state.sjzd.sjzdList.danger_level,
				hidden_status: state => state.sjzd.sjzdList.hidden_status,
			})
		},
		onLoad(option) {
			console.log(option)
			this.getQyxqList(option.id)
			this.getJcsbList(option.id, 1)
			this.getJcsbList(option.id, 2)
			this.getXcdxqList(option.id)
			this.getYhxxList(option.id, 1)
		},

		methods: {
			handleToInfo() {
				this.$tab.navigateTo("/pages/mine/info/index");
			},
			handleToEditInfo() {
				this.$tab.navigateTo("/pages/my/myrelease/index");
			},
			handleToSetting() {
				this.$tab.navigateTo("/pages/my/setting/index");
			},
			handleToLogin() {
				this.$tab.reLaunch("/pages/login");
			},
			handleToAvatar() {
				this.$tab.navigateTo("/pages/mine/avatar/index");
			},
			handleLogout() {
				this.$modal.confirm("确定注销并退出系统吗？").then(() => {
					this.$store.dispatch("LogOut").then(() => {
						this.$tab.reLaunch("/pages/index");
					});
				});
			},
			handleHelp() {
				this.$tab.navigateTo("/pages/my/enterprisefiles/index");
			},
			handleAbout() {
				this.$tab.navigateTo("/pages/my/systemmessage/index");
			},
			handleJiaoLiuQun() {
				this.$modal.showToast("QQ群：133713780");
			},
			handleBuilding() {
				this.$modal.showToast("模块建设中~");
			},
			open(e) {
				// console.log('open', e)
			},
			close(e) {
				// console.log('close', e)
			},
			change(e) {
				// console.log('change', e)
			},

			changeone(e) {

			},
			changethree(e) {
				console.log("e:", e);
			},
			tabClick() {
				this.$tab.navigateTo("/pages/my/systemmessage/index");
			},

			// 获取企业详情数据
			getQyxqList(qyId) {
				qyxqList(qyId).then((result) => {
					const data = result.data
					this.qyxqData = data
					console.log(this.qyxqData)
				}).catch((err) => {
					console.log(err)
				})
			},

			// 获取监测设备数据
			getJcsbList(qyId, num) {
				jcsbList(qyId, num).then((result) => {
					const data = result.data
					console.log("@@@@@$$$$", data)
					if (num === 1) {
						this.jcsbData = data
						this.range = data.deviceList.map((item) => {
							return {
								value: item.typeId,
								text: item.typeName
							}
						})
					}
					if (num === 2) {
						this.jksbData = data
						this.range1 = data.deviceList.map((item) => {
							return {
								value: item.typeId,
								text: item.typeName
							}
						})
					}

					console.log(this.jcsbData)
				}).catch((err) => {
					console.log(err)
				})
			},

			// 获取巡查点详情数据
			getXcdxqList(qyId) {
				xcdxqList(qyId).then((result) => {
					const data = result.data
					this.xcdxqData = data
					this.range2 = data.children.map((item) => {
						return {
							value: item.status,
							text: item.statusText
						}
					})
					// console.log(this.jcsbData)
				}).catch((err) => {
					console.log(err)
				})
			},

			// 获取隐患信息数据
			getYhxxList(qyId, dangerStatus) {
				yhxxList(qyId, dangerStatus).then((result) => {
					const data = result.data
					this.yhxxData = data
					// console.log(this.jcsbData)
				}).catch((err) => {
					console.log(err)
				})
			},

		},
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: #f5f6f7;
	}

	.mine-container {
		width: 100%;
		height: 100%;
		padding: 10px 10px 45px 10px;

		.header-section {
			padding: 22px 0px 22px 15px;
			background-color: #fff;
			color: #000;
			border-radius: 4px 4px 0px 0px;

			.login-tip {
				font-size: 18px;
				margin-left: 10px;
			}

			.cu-avatar {
				border: 2px solid #eaeaea;

				.icon {
					font-size: 40px;
				}
			}

			.user-info {
				margin-left: 15px;

				.u_title {
					font-size: 20px;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #343434;
					line-height: 62rpx;
				}

				.u_title_n {
					font-size: 16px;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #595959;
					line-height: 22px;
				}
			}
		}

		.content-section {
			position: relative;

			.mine-actions {
				margin: 15px 15px;
				padding: 20px 0px;
				border-radius: 8px;
				background-color: white;

				.action-item {
					.icon {
						font-size: 28px;
					}

					.text {
						display: block;
						font-size: 13px;
						margin: 8px 0px;
					}
				}
			}
		}
	}

	.handle-to {
		width: 108px;
		height: 36px;
		position: absolute;
		right: 0;
		background-color: #123;
		background: linear-gradient(to right, #2a62a5, #5192df);
		border: 1px solid #004ca7;
		border-right: none;
		border-radius: 20px 0px 0px 20px;
		margin-top: 36rpx;

		.textone {
			color: #fff;
			margin-left: 30rpx;
		}
	}

	.buttom-ks {
		height: 78px;
		background-color: #123;
		background: linear-gradient(to right, #e4eaf0, #e4eaf0);
		border-radius: 5px;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		border: 1px solid #b0d4ff;

		image {
			width: 440rpx;
			height: 52rpx;
		}

		text {
			font-size: 20px;
			font-family: Roboto-BoldItalic, Roboto;
			font-weight: normal;
			color: #225ea4;
			line-height: 24px;
			font-weight: 700;
		}
	}

	.vac {
		font-size: 14px;
		color: #225ea4;
		font-style: italic;
	}

	.menu-list {
		margin: 10px 0rpx 0rpx 0rpx;
	}

	.list-cell:first-child {
		border-radius: 4px 4px 4px 4px;
	}

	.list-cell {
		padding: 21px 16px;
	}

	.v-top {
		width: 10px;
		height: 18px;
		background-color: #123;
		border-radius: 0px 50px 50px 0px;
		margin-left: -15px;
		background: #9ebadb;
	}

	.v-buttom {
		width: 90px;
		height: 25px;
		font-size: 18px;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 700;
		color: rgba(52, 52, 52, 0.85);
		line-height: 25px;
		text-align: left;
		margin-left: 15px;
	}

	.v-fb {
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #8c8c8c;
		line-height: 24px;
		position: absolute;
		right: 28px;
		width: 154px;
		text-align: right;
	}

	.list-vcell {
		margin-bottom: 10px;
		background: #ffffff;
		box-shadow: 0px 4px 6px 0px rgba(123, 149, 149, 0.08);
		border-radius: 4px;
	}

	.uni-image {
		width: 320px;
		height: 0px;
		display: inline-block;
		overflow: hidden;
		position: relative;
	}

	.unioi {
		width: 140px;
		height: 30px;
	}

	.order {
		width: 710rpx;
		background-color: #ffffff;
		margin: 20rpx auto;
		border-radius: 8rpx;
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 28rpx;
		letter-spacing: 2rpx;
		box-shadow: 0px 3px 10px 0px rgba(148, 177, 188, 0.38);
	}

	.u-page {
		padding: 0;

		&__item {
			&__title {
				color: $u-tips-color;
				background-color: $u-bg-color;
				padding: 15px;
				font-size: 15px;

				&__slot-title {
					color: $u-primary;
					font-size: 14px;
				}
			}
		}
	}

	.u-collapse-content {
		color: $u-tips-color;
		font-size: 14px;
		height: 210px;
	}

	.text {
		font-size: 12px;
		color: #666;
		margin-top: 5px;
	}

	.uni-px-5 {
		padding-left: 10px;
		padding-right: 10px;
	}

	.uni-pb-5 {
		padding-bottom: 10px;
	}

	.uni-group {
		display: flex;
		align-items: center;
	}

	.text-two {
		color: #457ba5;
	}

	::v-deep .u-collapse-item__content__text {
		padding: 5px 10px !important;
		line-height: 22px;
	}

	::v-deep .u-collapse-content[data-v-06285ef4] {
		color: #343434;
	}

	::v-deep .uni-select {
		background-color: #e5edf3 !important;
		border: 0px solid #e5e5e5 !important;
	}

	::v-deep .uni-select__input-placeholder {
		color: #343434;
		font-size: 14px;
	}

	.align-text {
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #848484;
	}

	.align-text-td {
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #343434;
	}

	::v-deep .u-cell__body {
		background-color: #f2f2f2;
	}

	.example-body {
		flex-direction: column;
		flex: 1;
	}

	.content {
		padding: 15px;
	}

	.text {
		font-size: 14px;
		color: #666;
		line-height: 20px;
	}

	.button {
		// margin-top: 10px;
		margin: 10px;
		margin-bottom: 0;
	}

	.text-three {
		color: #3a9b54;
		font-size: 12px;
	}
</style>
